<template>
    <div>
        <div style="position: relative">
            <img style="width: 100%;" :src="img" alt="">
            <img :src="logo" alt="" class="wl-login-logo">
        </div>
        <div class="wl-login-form">
            <div>
                <div class="wl-login-tit">用户登录</div>
                <div class="wl-login-line"></div>
            </div>
            <div style="margin-top: 50px">
                <el-input placeholder="请输入用户名"
                          @keyup.enter.native="handleSetFocus('password')"
                          ref="userName"
                          prefix-icon="iconfont icon-user" v-model="loginForm.userName"></el-input>
                <el-input placeholder="请输入密码"
                          ref="password"
                          type="password"
                          @keyup.enter.native="submitForm"
                          style="margin-top: 20px" prefix-icon="iconfont icon-password"
                          v-model="loginForm.password"></el-input>
            </div>
            <div style="margin-top: 10px">
                <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
            </div>
            <div style="margin-top: 40px">
                <el-button v-loading="logining" style="width: 100%;height: 50px" @click="submitForm" type="primary">登
                    录
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import { getAgain, login } from '@/api/auth/auth'
    import { getPersonName } from '@/api/system/person'
    import { setCookie, Token } from '@/utils/cookie'

    export default {
        name: "Login",
        data() {
            return {
                img: require('../../assets/img/bg1111.jpg'),
                logo: require('../../assets/img/logowl.png'),
                checked: '',
                loginForm: {
                    userName: '',
                    password: '',
                    remember: false
                },
                admin: {
                    userName: '',
                    password: ''
                },
                orgId: '',
                logining: false,
                adminLogin: false,
            }
        },
        mounted() {
            let admin = this.$route.query.login
            if (admin === 'admin') {
                this.adminLogin = true
            }
            const ls = localStorage.getItem('loginForm')
            const acc = ls ? JSON.parse(ls) : false
            if (acc && acc.remember) {
                this.loginForm.userName = acc.userName
                this.loginForm.password = acc.password
                this.loginForm.remember = true
                this.handleSetFocus('password')
            } else {
                this.handleSetFocus('userName')
            }
        },
        methods: {
            submitForm() {
                if (this.loginForm.userName === '') {
                    this.$message({
                        message: '请输入账户名',
                        type: 'warning'
                    })
                    return
                } else if (this.loginForm.password === '') {
                    this.$message({
                        message: '请输入您的密码',
                        type: 'warning'
                    })
                    return
                } else {
                    this.logining = true
                    login(this.loginForm).then(res => {
                        if (this.loginForm.remember) {
                            localStorage.setItem('loginForm', JSON.stringify(this.loginForm))
                        } else {
                            localStorage.setItem('loginForm', '')
                        }
                        let data = JSON.parse(res.data)
                        setCookie(Token, data.token)
                        getAgain().then(res => {
                            sessionStorage.clear()
                            // 激活所有权限
                            // res.data.securityPermissions=getID()
                            this.$store.commit('SET_CURRENT_USER', res.data)
                            this.$router.push('/first')
                            this.logining = false
                        }).catch(() => {
                            this.logining = false
                        })
                    }).catch(() => {
                        this.logining = false
                    })
                }
            },
            handleRemember() {
                this.loginForm.remember = !this.loginForm.remember
                this.handleSetFocus('password')
            },
            handleSetFocus(el) {
                this.$nextTick(()=>{
                    this.$refs[el].focus()
                })
            }
        }
    }

</script>

<style scoped>
    .wl-login-logo {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40%;
    }

    .wl-login-form {
        position: fixed;
        width: 400px;
        height: 400px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
        padding: 30px 25px 0 25px;
    }

    .wl-login-tit {
        position: relative;
        font-size: 24px;
        color: #333333;
    }

    .wl-login-tit:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -15px;
        width: 100%;
        height: 1px;
        background-color: #e4e7ed;
        z-index: 1;
    }

    .wl-login-line {
        height: 3px;
        width: 100px;
        background: #009aff;
        margin-top: 11px;
        position: relative;
        z-index: 99;
    }
</style>
